// console.log({ requirejs, require, define })
// console.log(requirejs === require)

// require莫格模块的时候，应该在这里得到这个模块的返回值
// 数组里require的模块返回值可以在回调函数的参数里按顺序获取

// 先引入config，使用配置模块的短名称
// 再在回调里去引入需要加载的模块
require(['./config'], () => {
  require(['swiper', 'template', 'header','footer'], (Swiper, template) => {
    // 这里是当所有要require的模块全部执行结束以后执行的代码
    class Index {
      constructor() {
        this.banner()
        this.category()
      }
      banner() {
        // 实现轮播图
        var mySwiper = new Swiper('.lunbo', {
          // direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项

          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          autoplay: true,
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },

          // 如果需要滚动条
          // scrollbar: {
          //   el: '.swiper-scrollbar',
          // }

        })
        //鼠标覆盖停止自动切换
        mySwiper.el.onmouseover = function () {
          mySwiper.autoplay.stop();
        }

        //鼠标离开开始自动切换
        mySwiper.el.onmouseout = function () {
          mySwiper.autoplay.start();
        }
      }
      category () {
        $.get('/libs/json/homeCategory.json', resp => {
          console.log(resp)
          // 根据list数据渲染模板
          // template方法有两个参数
          //  第一个参数是定义模板的script标签的id，注意：不加#
          //  第二个参数是模板里所需要的数据，传一个对象： 模板里面需要list，传从后端拿到的resp进去
          // template方法的返回值就是根据模板渲染的html字符串结果
          const str = template('categoryTemplate', { list: resp })
          console.log(str)
          // 把渲染完成的html字符串放到容器盒子里
          $('#categoryList').html(str)
        })
      }
    }
    new Index()
  })
})



